import {Collapse} from 'antd'
import type {ColumnsType} from 'antd/es/table'
import React, {useState, useEffect} from 'react'
import {connect} from 'umi'
import cardStyles from '../../index.less'
import {getCarHistory} from '@/service/order/index'
import CustomTable from '@/components/Table'
import styles from './index.less'
import {getPublicDownloadUrl} from '@/service/common/upload'

const {Panel} = Collapse

function CarHistory(props: any) {
	const {info} = props
	const customizeHeader = (value: string) => (
		<div>
			<div className={styles.tip} />
			{value}
		</div>
	)
	const renewInfoColumns: ColumnsType<any> = [
		{title: '原车辆车牌号',dataIndex: 'plateNo',align: 'center',width: 150},
		{title: '原车辆车架号',dataIndex: 'vinNo',align: 'center',width: 150},
		{title: '原车辆品牌车系车型', dataIndex: 'brandName', align: 'center',width: 150},
		{title: '原车辆绑车时车辆所属城市', dataIndex: 'cityName', align: 'center',width: 150},
		{title: '原车辆绑车时车辆所在仓库', dataIndex: 'depotName', align: 'center',width: 150},
		{title: '原车辆绑车时车辆保险', dataIndex: 'insuranceNames', align: 'center',width: 150},
		{title: '原车辆绑车备注', dataIndex: 'tiedRemark', align: 'center',width: 150},
		// {title: '原车辆车辆订单id', dataIndex: 'orderCarId', align: 'center',width: 150},
		{title: '原车辆交车人', dataIndex: 'deliveryPerson', align: 'center',width: 150},
		{title: '原车辆交车时间', dataIndex: 'deliveryTime', align: 'center',width: 150},
		{title: '原车辆交车备注',dataIndex: 'deliveryRemark',align: 'center',width: 150},
		{title: '原车辆交车附件',dataIndex: 'deliveryAttachment',align: 'center',width: 150,
			render: (_text:any, record:any) => <a href={record?.deliveryAttachmenthref} target="blank">{record?.deliveryAttachment}</a>,
		},
		{title: '原车辆换车申请时间', dataIndex: 'applyTime', align: 'center',width: 150},
		{title: '原车辆换车申请备注', dataIndex: 'applyRemark', align: 'center',width: 150},
		{title: '原车辆换车申请退回仓库', dataIndex: 'putDepotName', align: 'center',width: 150},
		{title: '原车辆交车验车人', dataIndex: 'validatePersonDelivery', align: 'center',width: 150},
		{title: '原车辆交车验车时间', dataIndex: 'validateTimeDelivery', align: 'center',width: 150},
		{title: '原车辆交车验车备注', dataIndex: 'validateRemarkDelivery', align: 'center',width: 150},
		{title: '原车辆交车验车附件', dataIndex: 'validateAttachmentDelivery', align: 'center',width: 150,
			render: (_text:any, record:any) => <a href={record?.validateAttachmentDeliveryurl} target="blank">{record?.validateAttachmentDelivery}</a>,
		},
		{title: '原车辆还车验车人', dataIndex: 'validatePersonReturn', align: 'center',width: 150},
		{title: '原车辆还车验车时间', dataIndex: 'validateTimeReturn', align: 'center',width: 150},
		{title: '原车辆还车验车备注', dataIndex: 'validateRemarkReturn', align: 'center',width: 150},
		{title: '原车辆还车验车附件', dataIndex: 'validateAttachmentReturn', align: 'center',width: 150,
			render: (_text:any, record:any) => <a href={record?.validateAttachmentReturnurl} target="blank">{record?.validateAttachmentReturn}</a>,
		},
		{title: '原车辆签约备注', dataIndex: 'signRemark', align: 'center',width: 150},
		{title: '原车辆签约附件', dataIndex: 'signAttachment', align: 'center',width: 150,
			render: (_text:any, record:any) => <a href={record?.signAttachmenturl} target="blank">{record?.signAttachment}</a>,
		},
	]
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})
	const [total, setTotal] = useState(0) // 费用减免
	const [list, setList] = useState<any[]>([])
	useEffect(() => {
		const data={
			current:1,
			size:10,
			orderCarId:info?.id
		}
		getCarHistory(data).then(
			(res: any) => {
				if (res?.success) {
					const list1:any = []
					res?.data?.records.forEach((res1:any)=>{
						list1.push(res1.deliveryAttachment)
						list1.push(res1.validateAttachmentDelivery)
						list1.push(res1.validateAttachmentReturn)
						list1.push(res1.signAttachment)
					})
					if(list1?.length){
						getPublicDownloadUrl(list1).then((result: any) => {
							if (result?.success) {
							const newAnnexList = [...res.data.records]
							newAnnexList?.forEach((item: any, index:number) => {
								result?.data?.forEach((items:any)=>{
									if(items?.id === Number(item?.deliveryAttachment)){
										res.data.records[index].deliveryAttachmenthref = items?.url
										res.data.records[index].deliveryAttachment = items?.filename
									}
									if(items?.id === Number(item?.validateAttachmentDelivery)){
										res.data.records[index].validateAttachmentDeliveryhref = items?.url
										res.data.records[index].validateAttachmentDelivery = items?.filename
									}
									console.log(item?.validateAttachmentReturn,'item?.validateAttachmentReturnitem?.validateAttachmentReturn')
									if(items?.id === Number(item?.validateAttachmentReturn)){
										res.data.records[index].validateAttachmentReturnurl = items?.url
										res.data.records[index].validateAttachmentReturn = items?.filename
									}
									if(items?.id === Number(item?.signAttachment)){
										res.data.records[index].signAttachmenturl = items?.url
										res.data.records[index].signAttachment = items?.filename
									}
								})
							
							}
							)
							setList(res?.data?.records)
									}
								})
					}				
					setTotal(res?.data?.total)
				}
				
				
			},
		)
	}, [])
	return (
		<div className={cardStyles.card} id="carHistory">
			<Collapse
				defaultActiveKey={['1', '2']}
				ghost
				expandIconPosition="end">
				<Panel header={customizeHeader('换车历史记录')} key="1">
					<CustomTable
						params={params}
						columns={renewInfoColumns}
						pagination
						total={total}
						callback={(pagination: any) => {
							setParams(pagination)
						}}
						loading={false}
						dataSource={list}
					/>
				</Panel>
			</Collapse>
		</div>
	)
}

export default connect(({global}: any) => ({global}))(CarHistory)
